<template>
<div class="center">
  <div class="container">
    <!-- 头部 -->
    <Header></Header>
    <!-- 内容 -->
    <div>
        <el-container style="height: 100%;">
          <el-aside style="margin-top:80px;width: 240px;padding-top:40px;position: fixed;top: 0;bottom: 0;transition: padding-top .3s;">
            <el-menu style="border-right:none;" @on-select="changeSidebar" :active-name="sidebarItem"
            theme="light" width="auto" :open-names="['center']">
              <el-submenu name="center" index="1">
                <template slot="title"><i class="el-icon-menu"></i>Table表格</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="goTo('/standardTable')">标准表格</el-menu-item>
                  <el-menu-item index="1-2" @click="goTo('/editTable')">编辑表格</el-menu-item>
                  <el-menu-item index="1-3" @click="goTo('/parentChildTable_v2')">一对多树形</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-s-grid"></i>Form表单</template>
                <el-menu-item-group>
                  <el-menu-item index="2-1" @click="goTo('/FormTemplate')">Form表单</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title"><i class="el-icon-link"></i>template模版案例</template>
                <el-menu-item-group>
                  <el-menu-item index="7-1" @click="goTo('/StandardTemplate')">标准表格模版</el-menu-item>
                  <!-- <el-menu-item index="7-14" @click="goTo('/tableAttribuatiue')">单个表格属性</el-menu-item> -->
                  <el-menu-item index="7-2" @click="goTo('/EditTemplate')">编辑表格模版</el-menu-item>
                  <el-menu-item index="7-3" @click="goTo('/lrTable')">父子表格(左右布局)</el-menu-item>
                  <el-menu-item index="7-4" @click="goTo('/parentchildtree')">左右布局树表格</el-menu-item>
                  <el-menu-item index="7-5" @click="goTo('/parentchildtree_v1')">左右布局树表格_v1</el-menu-item>
                  <el-menu-item index="7-6" @click="goTo('/parentchildtree_v2')">左右布局树表格_v2</el-menu-item>
                  <el-menu-item index="7-7" @click="goTo('/ParentChildTemplate')">父子表格(上下布局)</el-menu-item>
                  <el-menu-item index="7-8" @click="goTo('/treeLoadTemplate')">懒加载树表格</el-menu-item>
                  <el-menu-item index="7-9" @click="goTo('/treeTable')">左右部门选择</el-menu-item>
                  <el-menu-item index="7-10" @click="goTo('/treePageTable')">带分页树形表格</el-menu-item>
                  <el-menu-item index="7-11" @click="goTo('/treeTableNode')">树形表格</el-menu-item>
                  <el-menu-item index="7-12" @click="goTo('/moreTableTemplate')">一对多表</el-menu-item>
                  <el-menu-item index="7-13" @click="goTo('/exportPage')">主子表实例</el-menu-item>
                  <!-- <el-menu-item index="7-13" @click="goTo('/parentChildTable_v2')">一对多树形</el-menu-item> -->
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon-picture"></i>upload上传</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1" @click="goTo('/EleUpload')">上传</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title"><i class="el-icon-date"></i>date日期</template>
                <el-menu-item-group>
                  <el-menu-item index="4-1" @click="goTo('/dateTemplate')">日期</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title"><i class="el-icon-position"></i>dragDialog拖拽弹窗</template>
                <el-menu-item-group>
                  <el-menu-item index="5-1" @click="goTo('/dragTemplate')">拖拽弹窗例子</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title"><i class="el-icon-video-camera-solid"></i>el-carousel轮播</template>
                <el-menu-item-group>
                  <el-menu-item index="6-1" @click="goTo('/swiper')">轮播图</el-menu-item>
                  <el-menu-item index="6-2" @click="goTo('/swiperTemplate')">轮播图带放大镜</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
               <el-submenu index="8">
                <template slot="title"><i class="el-icon-picture-outline"></i>echarts图形</template>
                <!-- <el-menu-item-group>
                  <el-menu-item index="8-1" @click="goTo('/barCharts')">柱状图</el-menu-item>
                </el-menu-item-group> -->
                <el-menu-item-group>
                  <el-menu-item index="8-2" @click="goTo('/barCharts1')">堆叠柱状图</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="8-4" @click="goTo('/foldLine')">折线图</el-menu-item>
                </el-menu-item-group>
                 <el-menu-item-group>
                  <el-menu-item index="8-5" @click="goTo('/pieCharts')">饼状图</el-menu-item>
                </el-menu-item-group>
                 <!-- <el-menu-item-group>
                  <el-menu-item index="8-6" @click="goTo('/pieCharts1')">饼状图</el-menu-item>
                </el-menu-item-group> -->
                 <el-menu-item-group>
                  <el-menu-item index="8-7" @click="goTo('/curveCharts')">曲线图</el-menu-item>
                </el-menu-item-group>
                 <el-menu-item-group>
                  <el-menu-item index="8-8" @click="goTo('/gaugeCharts')">仪表盘</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="8-9" @click="goTo('/treeCharts')">树形图</el-menu-item>
                </el-menu-item-group>
                 <!-- <el-menu-item-group>
                  <el-menu-item index="8-10" @click="goTo('/pieCharts1')">流程图</el-menu-item>
                </el-menu-item-group> -->
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-container style="width:870px;padding-left: 270px;padding-bottom: 100px;box-sizing: border-box;height:100%;">
            <el-main style="width:100%;padding:0px;padding-top:120px;">
              <router-view></router-view>
            </el-main>
          </el-container>
        </el-container>
    </div>
  </div>
  <!-- 底部 -->
</div>
</template>
<script>
import Header from '../home/header.vue';
  export default {
    name:"center",
    components: { Header },
    data() {
      return {
        sidebarItem:"",
      }
    },
    mounted() {
      this.sidebarItem = this.$route.name;
    },
    methods: {
      goTo(path){
        this.$router.replace(path)
      },
      changeSidebar(name) {
        this.sidebarItem = name;
        this.$router.push({
          name: name,
        });
      },
    },

  };
</script>
<style scoped>
  .center{
    margin: 0 auto 110px;
    width: 1140px;
  }

  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .el-menu-item{
    font-size: 12px!important;
  }
</style>
